<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="style/common.css" />
</head>
<body>
<div id="wrap">
  <!--^头部-->
  <div id="header" class="clearfix">
    <a href="#"><img src="" alt="" id="logo"></a>
    <div id="user-top">
      <input type="text" class="text"> 
      <input type="password" class="text">
      <u class="btn btn-blue">登录</u>
      <a href="#">注册</a> 
      <a href="#">登录</a>
      <span>欢迎 <a href="#" id="username">西田麻衣</a></span>
    </div>
    <div id="user-top-sec">客服热线：0510-85381608</div>
  </div>
  <!--$头部-->
  <!--^导航-->
  <ul id="menu">
    <li><a href="#" class="active">首页</a></li>
    <li><a href="#">应用中心</a></li>
    <li><a href="#">基础架构云</a></li>
    <li><a href="#">行业应用云</a></li>
    <li><a href="#">资讯中心</a></li>
  </ul>
  <!--$导航-->
  <!--^mainbody-->
  <div id="mainbody">
    <!--^焦点图-->
    <div class="cui-photo-slide"></div>
    <!--$焦点图-->
  </div>
  <!--$mainbody-->
  <!--^sidebar-->
  <div id="sidebar">
    <div class="box_head">
        <div class="tab">
          <ul>
            <li class="on"><a href="#tab1">资讯中心</a></li>
            <li><a href="#tab2">行业新闻</a></li>
          </ul>
        </div>
        <a class="more" href="#">更多</a>
        <ul class="content newslist">
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
        </ul>
        <ul class="content newslist">
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
          <li><a href="#">"英文/数字.中国"域名将开注 九月启动</a></li>
        </ul>
    </div>
  </div>
  <!--$sidebar-->
</div>
<script type="text/javascript">
;(function($){
  $.fn.photoSlide=function(data){
    var s='',c="",timmer,index=data.length-1,zIndex=100;
    var imgbox=$('<div class="slide-imgs">'),
    ctrl=$('<div class="slide-ctrl">')
      .on("mouseenter","b",function(){
        clearTimeout(timmer);
        go(this.innerHTML);
      }).on("mouseleave","b",function(){
        timmer=setTimeout(go,4000);
      }),
    title=$('<div class="slide-title">'),
    ttl=$('<div class="slide-ttl">');
    $.each(data,function(i,o){
      s+='<a style="background-image:url('+o.src+')" href="'+o.link+'"></a>';
      c+='<b>'+i+'</b>';
    })
    imgbox.html(s);
    ctrl.html(c);
    imgbox.add(ttl).add(title).add(ctrl).appendTo(this)
    var img=imgbox.find(">a").css({opacity:0});
    var go=function(n){
      if(n===index) return;
      if(!n){
        n=index++;
      }
      index=n;
      if(n>=data.length) n=index=0;
      ctrl.find(".active").removeClass();
      ctrl.find("b:eq("+n+")").addClass("active");
      img.eq(n).css({zIndex:zIndex++,opacity:0}).stop().animate({opacity:1});
      title.html('<a href="'+data[n].link+'" target="_blank">'+data[n].title+'</a>')
    }
    timmer=setTimeout(go,0);
  };
})(jQuery);
//onload
$(function(){
  //gallery
  $(".cui-photo-slide").photoSlide([
    {title:"基础架构云",src:"images/1.jpg",link:"http://baidu.com"},
    {title:"行业应用云",src:"images/2.jpg",link:"http://baidu.com"}
    ]);
  //tab
  $(".tab").each(function(i,o){
    $(o).on("mouseover","a",function(){
      $(o).find(">ul>li.on").removeClass("on");
      $(this).parent().addClass("on");
      var content=$(o).parent().find("> .content").hide();
      var index=$(o).find("a").index(this);
      content.eq(index).show();
      return false;
    });
    $("li.on > a",o).mouseover();
  });
});
</script>
</body>
</html>
